<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟dom转换为真实dom</title>
</head>
<body>
    <script>
        function parseVnode(vNode) {
            let tag = vNode.tag;
            let type = vNode.type;
            let attrs = vNode.data;
            let children = vNode.children;
            let value = vNode.value;
            let _realDom = null;
            if (type === 1) {
                let el = document.createElement(tag);
                let props = Object.keys(attrs);
                let prop;
                while (prop = props.shift()) {
                    el.setAttribute(prop, attrs[prop]);
                }
                if (children.length) {
                    for (let i = 0; i < children.length; i++) {
                        el.appendChild(parseVnode(children[i]));
                    }
                }
                _realDom = el;
            } else {
                let textNode = document.createTextNode(value);
                _realDom = textNode;
            }
            return _realDom;
        }
    </script>
</body>
</html>